<template>
  <div class="login-container">
    <div class="header-wrap">
      <h1 class="header"></h1>
      <el-select v-model="language" class="select-language">
        <el-option
          v-for="item in languageOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
          <i
            class="el-icon-check select-icon"
            v-show="language == item.value"
          ></i>
          <span>{{ item.label }}</span>
        </el-option>
      </el-select>
    </div>
    <el-form
      ref="loginForm"
      :model="loginForm"
      :rules="loginRules"
      class="login-form"
      auto-complete="on"
      label-position="left"
    >
      <div class="form-item-wrap">
        <div class="tabs-header">
          <div
            @click="tabPages(item.value)"
            class="head-item"
            :class="[isActiveTab == item.value ? 'is-active-tab' : '']"
            v-for="item in tabHeaders"
            :key="item.value"
          >
            <span class="content">{{ item.title }}</span>
          </div>
        </div>
        <div class="item-wrap" v-show="isActiveTab == 0">
          <p class="error-tip" v-show="showError">
            <i class="el-icon-warning"></i>
            <span>{{ errorTip }}</span>
          </p>
          <el-form-item>
            <span class="icon-login-user"></span>
            <el-input
              ref="username"
              v-model="loginForm.username"
              placeholder="用户名"
              name="username"
              type="text"
              tabindex="1"
              @blur="checkError(0)"
            />
          </el-form-item>

          <el-form-item>
            <span class="icon-login-pwd"></span>
            <el-input
              ref="password"
              v-model="loginForm.password"
              placeholder="请输入登录密码"
              name="password"
              type="password"
              tabindex="2"
              @blur="checkError(1)"
              @keyup.enter.native="handleLogin"
            />
            <span class="forgot-pwd" @click="forgotPwd">忘记密码</span>
          </el-form-item>

          <el-button
            :loading="loading"
            type="success"
            class="login-button"
            style="width:88%;"
            @click.native.prevent="handleLogin"
            >登录</el-button
          >
        </div>
        <div class="tb-login-wrap" v-show="isActiveTab == 1">
          <TbLogin></TbLogin>
        </div>
      </div>
    </el-form>
    <div class="tips">
      <span>©阿里巴巴新零售供应链平台 版权所有</span>
    </div>
  </div>
</template>

<script>
import { validUsername } from "@/utils/validate";
import TbLogin from "./tbLogin"
export default {
  name: "Login",
  components:{
    TbLogin
  },
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!validUsername(value)) {
        callback(new Error("请输入帐户名"));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    return {
      tabHeaders: [
        { title: "普通登录", value: 0 },
        { title: "淘宝登录", value: 1 },
        { title: "员工登录", value: 2 }
      ],
      isActiveTab: 0,
      errorTip: "请输入账户名",
      showError: false,
      loginForm: {
        username: "michael@wintaltrade.com",
        password: ""
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", message: "请输入账户名" }
        ],
        password: [{ required: true, trigger: "blur", message: "请输入密码" }]
      },
      language: "01",
      languageOptions: [
        { label: "中文", value: "01" },
        { label: "English", value: "02" },
        { label: "русский", value: "03" }
      ],
      loading: false,
      redirect: undefined
    };
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  methods: {
    tabPages(val) {
      this.isActiveTab = val;
      if (val == 2) {
        window.location.href = "https://login.alibaba-inc.com/ssoLogin.htm";
      }
    },
    checkError(val) {
      if (val == 0 && !this.loginForm.username) {
        this.showError = true;
        this.errorTip = "请输入账户名";
        return false;
      } else if (val == 1 && !this.loginForm.password) {
        this.showError = true;
        this.errorTip = "请输入密码";
        return false;
      } else {
        this.showError = false;
        return false;
      }
    },
    forgotPwd() {
      // alert("i forgot pwd !");
    },
    handleLogin() {
      if (!this.loginForm.username) {
        this.showError = true;
        this.errorTip = "请输入账户名";
        return false;
      }
      if (!this.loginForm.password) {
        this.showError = true;
        this.errorTip = "请输入密码";
        return false;
      }
      this.loading = true;
      this.$store
        .dispatch("user/login", this.loginForm)
        .then(() => {
          this.$store.dispatch('tagsView/delAllViews')
          this.$store.commit('app/setLoading', true);
          this.$router.push({ path: this.redirect || "/dashboard" });
          setTimeout(()=> {
            this.$store.commit('app/setLoading', false);
          }, 1000)
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
      /* this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          this.$store
            .dispatch("user/login", this.loginForm)
            .then(() => {
              this.$router.push({ path: this.redirect || "/purchaseOrders" });
              this.loading = false;
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      }); */
    }
  }
};
</script>

<style lang="scss">
$bg: #283443;
$light_gray: #fff;

/* reset element-ui css */
.login-container {
  .select-language {
    .el-input {
      width: 160px;
      height: 28px;
      line-height: 30px;
      input {
        background: #fff;
        border-radius: 5px;
        height: 32px;
        font-size: 12px;
        padding-left: 8px;
        border: 1px solid #30b30e;
      }
    }
    .el-input__suffix {
      top: 8px;
    }
    .is-focus .el-input__suffix {
      top: -4px;
    }
  }
  .el-input {
    display: inline-block;
    width: 90%;
    height: 28px;
    line-height: 30px;
    input {
      background: transparent;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 12px 5px 12px 15px;
      height: 47px;

      &:-webkit-autofill {
        box-shadow: 0 0 0px 1000px $bg inset !important;
        background: #fff !important;
        color: #fff !important;
      }
    }
  }
  .el-form-item__content {
    border-bottom: 1px solid #e3e3e3;
  }
  .el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    color: #333;
  }
  .el-button--success {
    background-color: #30b30e;
    font-size: 20px;
    height: 42px;
    padding: 0;
    line-height: 42px;
    text-align: center;
    border-radius: 3px;
    &:hover {
      background-color: #30b30e !important;
      color: #ffffff !important;
    }
  }
}
</style>

<style lang="scss" scoped>
$dark_gray: #889aa4;
$light_gray: #eee;
.login-container {
  min-height: 100%;
  width: 100%;
  background-image: url("../../assets/images/login_bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  position: relative;
  .header-wrap {
    padding: 20px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .header {
      background-image: url("../../assets/images/logo.svg");
      width: 226px;
      height: 28px;
    }
  }

  .login-form {
    position: absolute;
    width: 400px;
    height: 400px;
    top: 50%;
    left: 50%;
    margin: -200px 0 0 -200px;
    padding: 20px;
    background-color: hsla(0, 0%, 100%, 0.3);
    .form-item-wrap {
      background-color: #fff;
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
      .item-wrap {
        padding: 20px;
      }
      .login-button {
        position: absolute;
        bottom: 40px;
        left: 20px;
        right: 20px;
      }
      .tabs-header {
        display: flex;
        align-items: center;
        justify-content: space-around;
        box-sizing: border-box;
        border-bottom: 1px solid #e3e3e3;
        .head-item {
          font-size: 14px;
          height: 38px;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 16px;
          color: #666;
          cursor: pointer;
          border-bottom: 2px solid transparent;
        }
        .is-active-tab {
          border-color: #30b30e;
          color: #30b30e;
        }
      }
      .error-tip {
        margin-bottom: 10px;
        padding: 5px 8px;
        border: 1px solid transparent;
        overflow: hidden;
        background-color: #ffeee6;
        font-size: 12px;
        color: #666;
        display: flex;
        align-items: center;
        .el-icon-warning {
          color: #f50;
          font-size: 18px;
          margin-right:4px;
        }
      }
    }
  }

  .svg-container {
    padding: 6px 5px 6px 15px;
    color: $dark_gray;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  }
  .icon-login-user {
    display: inline-block;
    width: 18px;
    height: 22px;
    vertical-align: middle;
    background-image: url("../../assets/images/user.png");
    background-repeat: no-repeat;
    background-size: 100%;
  }
  .icon-login-pwd {
    display: inline-block;
    width: 20px;
    height: 22px;
    vertical-align: middle;
    background-image: url("../../assets/images/pwd.png");
  }
  .title-container {
    position: relative;

    .title {
      font-size: 26px;
      color: $light_gray;
      margin: 0px auto 40px auto;
      text-align: center;
      font-weight: bold;
    }
  }
  .tips {
    font-size: 14px;
    color: #fff;
    position: fixed;
    bottom: 20px;
    font-size: 12px;
    opacity: 0.8;
    left: 0;
    right: 0;
    text-align: center;
    transform: scale(0.9);
    font-weight: 200;
  }
  .forgot-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 14px;
    color: #30b30e;
    cursor: pointer;
    user-select: none;
  }
}
</style>

<style>
body /deep/ .popper__arrow {
  display: none !important;
}
/* body /deep/ .el-popper {
  top: 40px !important;
} */
body /deep/ .el-select-dropdown__item.selected {
  color: #606266 !important;
  font-weight: normal !important;
}
body /deep/ .el-select-dropdown__item {
  font-size: 12px;
  height: 32px;
}
body .select-icon {
  color: #30b30e !important;
  font-weight: bold !important;
  font-size: 14px;
  position: absolute;
  left: 4px;
  top: 10px;
}
</style>
